/*
    element样式自定义
*/
body {
    .w-1 {
        .el-button {
            width: 100%
        }
    }
    .el-button {
        @include border_color($color: 'border-base');
        @include background_color('color-t');
        @include font_color('cover3');

        width: auto;
        &:hover {
            @include border_color($color: 'primary-light1');
        }
    }
    
    // 按钮
    .el-button.is-disabled {
        @include font_color('text-disabled');
    }
    .el-button--default {
        @include border_color($color: 'border-base');
        @include background_color('color-t');
        @include font_color('cover3');
        &:hover {
            @include border_color($color: 'primary-light1');
        }
    }
    .el-button.is-plain.el-button--default {
        @include border_color($color: 'border-base');
        @include background_color('color-t');
        @include font_color('cover3');
        &:hover,
        &:focus {
            @include border_color($color: 'primary-light1');
        }
    }
    .el-button--default.is-disabled {
        @include border_color($color: 'text-disabled');
    }
    .el-button--primary {
        @include background_color('primary');
        @include border_color($color: 'primary');
        @include font_color('color-w');
        &:hover {
            @include background_color('primary-light1');
            @include border_color($color: 'primary-light1');
        }
    }
    .el-button.is-plain.el-button--primary {
        @include border_color($color: 'primary');
        @include background_color('primary-light2');
        @include font_color('cover3');
        &:hover,
        &:focus {
            @include background_color('primary');
            @include font_color('color-w');
        }
    }
    .el-button--primary.is-disabled {
        @include background_color('primary-light1');
        @include border_color($color: 'primary-light1');
    }
    .el-button--danger {
        @include background_color('danger');
        @include border_color($color: 'danger');
        @include font_color('color-w');
        &:hover {
            @include background_color('danger-light1');
            @include border_color($color: 'danger-light1');
        }
    }
    .el-button.is-plain.el-button--danger {
        @include border_color($color: 'danger');
        @include background_color('danger-light2');
        @include font_color('cover3');
        &:hover,
        &:focus {
            @include background_color('danger');
            @include font_color('color-w');
        }
    }
    .el-button--danger.is-disabled {
        @include background_color('danger-light1');
        @include border_color($color: 'danger-light1');
    }
    .el-button--warning {
        @include background_color('warning');
        @include border_color($color: 'warning');
        @include font_color('color-w');
        &:hover {
            @include background_color('warning-light1');
            @include border_color($color: 'warning-light1');
        }
    }
    .el-button--warning.is-disabled {
        @include background_color('warning-light1');
        @include border_color($color: 'warning-light1');
    }
    .el-button.is-plain.el-button--warning {
        @include border_color($color: 'warning');
        @include background_color('warning-light2');
        @include font_color('cover3');
        &:hover,
        &:focus {
            @include background_color('warning');
            @include font_color('color-w');
        }
    }
    .el-button--success {
        @include background_color('success');
        @include border_color($color: 'success');
        @include font_color('color-w');
        &:hover {
            @include background_color('success-light1');
            @include border_color($color: 'success-light1');
        }
    }
    .el-button--success.is-disabled {
        @include background_color('success-light1');
        @include border_color($color: 'success-light1');
    }
    .el-button.is-plain.el-button--success {
        @include border_color($color: 'success');
        @include background_color('success-light2');
        @include font_color('cover3');
        &:hover,
        &:focus {
            @include background_color('success');
            @include font_color('color-w');
        }
    }
    .el-button--info {
        @include background_color('info');
        @include border_color($color: 'info');
        @include font_color('cover3');
        &:hover {
            @include background_color('info-light1');
            @include border_color($color: 'info-light1');
        }
    }
    .el-button.is-plain.el-button--info {
        @include border_color($color: 'info');
        @include background_color('info-light2');
        @include font_color('cover3');
        &:hover,
        &:focus {
            @include background_color('info');
            @include font_color('color-w');
        }
    }
    .el-button--info.is-disabled {
        @include background_color('info-light1');
        @include border_color($color: 'info-light1');
        @include font_color('cover3');
    }
    .el-button.el-button--text {
        @include font_color('primary');

        border: none;
        &:hover {
            border: none;
        }
    }

    // 单选
    .el-radio {
        @include font_color('text-primary');
        .el-radio__input {
            .el-radio__inner {
                @include border_color($color: 'border-base');
            }
        }
        .el-radio__input.is-checked {
            .el-radio__inner {
                @include background_color('primary');
                @include border_color($color: 'primary');
            }
        }
        .el-radio__input.is-checked + .el-radio__label {
            @include font_color('primary');
        }
        .el-radio__input.is-disabled .el-radio__inner {
            @include font_color('text-disabled');
            @include background_color('bg-disabled');
        }
        .el-radio.is-bordered {
            @include border_color($color: 'border-base');
        }
    }
    #app .el-radio-group {
        .el-radio-button {
            .el-radio-button__inner {
                border-left: 0;
            }
        }
    }
    .el-radio-button {
        @include font_color('text-primary');
        .el-radio-button__inner {
            @include background_color('color-t');
            @include font_color('cover3');
            @include border_color($color: 'border-base');
        }
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
            @include background_color('primary');
            @include font_color('color-w');
        }
        .el-radio-button__orig-radio:disabled + .el-radio-button__inner {
            @include font_color('text-disabled');
        }
    }
    #app .el-radio-button:first-child {
        .el-radio-button__inner {
            @include border_color_only($direction: left, $color: 'border-base');
        }
    }
    .el-radio.is-bordered {
        @include border_color($color: 'border-base');
    }
    .el-radio.is-bordered.is-checked {
        @include border_color($color: 'primary');
    }
    // 复选
    .el-checkbox {
        @include font_color('text-primary');
        .el-checkbox__input {
            .el-checkbox__inner {
                @include border_color($color: 'border-base');
                @include background_color($color: 'color-t');
            }
        }
        .el-checkbox__label {
            @include font_color('text-primary');
        }
        .el-checkbox__input.is-checked ,
        .el-checkbox__input.is-indeterminate {
            .el-checkbox__inner {
                @include border_color($color: 'primary');
                @include background_color('primary');
                &::after {
                    @include border_color($color: 'color-w');

                    border-top: 0 !important;
                    border-left: 0 !important;
                }
            }
        }
        .el-checkbox__input.is-checked + .el-checkbox__label {
            @include font_color('primary');
        }
        .el-checkbox__input.is-disabled {
            .el-checkbox__inner {
                @include font_color('color-disabled');
                @include background_color('color-disabled');
            }
        }
    }
    #app .el-checkbox-group {
        .el-checkbox-button {
            .el-checkbox-button__inner {
                border-left: 0;
            }
        }
    }
    .el-checkbox-button {
        @include font_color('text-primary');
        .el-checkbox-button__inner {
            @include background_color('color-t');
            @include font_color('cover3');
            @include border_color($color: 'border-base');
        }
        .el-checkbox-button__original:checked + .el-checkbox-button__inner {
            @include background_color('primary');
            @include font_color('color-w');
        }
        .el-checkbox-button__original:disabled + .el-checkbox-button__inner {
            @include font_color('text-disabled');
        }
    }
    #app .el-checkbox-button:first-child {
        .el-checkbox-button__inner {
            @include border_color_only($direction: left, $color: 'border-base');
        }
    }
    .el-checkbox.is-bordered {
        @include border_color($color: 'border-base');
    }
    .el-checkbox.is-bordered.is-checked {
        @include border_color($color: 'primary');
    }
    
    // 输入框
    .el-input {
        flex: 1;
        .el-input__inner {
            @include background_color('color-t');
            @include border_color($color: 'border-base');
            @include font_color('text-regular');
            &:focus {
                @include border_color($color: 'primary');
            }
        }
        .el-input__count {
            @include background_color('color-t');
            @include font_color('text-regular');
        }
        .el-input__prefix,
        .el-input__suffix {
            @include box_flex(
                $width: auto,
                $height: 100%,
                $direction: row,
                $justify: center,
                $align: center
            );
        }
        .el-input__prefix {
            left: 10px;
        }
        .el-input__suffix {
            right: 10px;
        }
    }
    .el-input.is-disabled {
        .el-input__inner {
            @include background_color('color-t');
            @include border_color($color: 'text-disabled');
            @include font_color('text-disabled');
        }
    }
    .el-textarea {
        .el-textarea__inner {
            @include background_color('color-t');
            @include border_color($color: 'border-base');
            @include font_color('text-regular');
            &:focus {
                @include border_color($color: 'primary');
            }
        }
        .el-input__count {
            @include background_color('color-t');
            @include font_color('text-regular');
        }
    }
    .el-input-group {
        .el-input-group__prepend {
            @include background_color('cover');
            @include border_color($color: 'border-base');
            @include font_color('text-regular');

            border-right: 0 !important;
            .el-input,
            .el-button,
            .el-select {
                border: none;
                .el-input__inner {
                    border: none;
                }
            }
        }
        .el-input-group__append {
            @include background_color('cover');
            @include border_color($color: 'border-base');
            @include font_color('text-regular');

            border-left: 0 !important;
            .el-input,
            .el-button,
            .el-select {
                border: none;
                .el-input__inner {
                    border: none;
                }
            }
        }
        .el-select .el-input {
            width: 130px;
            .el-input__inner:focus {
                @include border_color($color: 'border-base');

                border-right: 0 !important;
                border-left: 0 !important;
            }
        }
        .el-select .el-input.is-focus {
            .el-input__inner {
                @include border_color($color: 'border-base');
            }
        }
    }
    .el-input-group--append {
        .el-select {
            .el-input.is-focus {
                .el-input__inner {
                    @include border_color($color: 'color-t');
                }
            }
        }
    }
    .el-input-group--prepend {
        .el-select {
            .el-input.is-focus {
                .el-input__inner {
                    @include border_color($color: 'color-t');
                }
            }
        }
    }
    // 计数器
    .el-input-number {
        .el-input-number__decrease {
            @include border_color_only(
                $direction: right,
                $color: 'border-base'
            );
            @include background_color('primary');
            @include font_color('color-w');
            &:hover {
                @include font_color('primary');
                @include font_color('color-w');
            }
            &:hover:not(.is-disabled)
            ~ .el-input
            .el-input__inner:not(.is-disabled) {
                @include border_color($color: 'primary');
                @include font_color('primary');
            }
        }
        .el-input-number__decrease.is-disabled {
            @include font_color('text-disabled');
            @include background_color('bg-disabled');
        }
        .el-input-number__increase {
            @include border_color_only($direction: left, $color: 'border-base');
            @include background_color('primary');
            @include font_color('color-w');
            &:hover {
                @include font_color('primary');
                @include font_color('color-w');
            }
            &:hover:not(.is-disabled)
            ~ .el-input
            .el-input__inner:not(.is-disabled) {
                @include border_color($color: 'primary');
            }
        }
        .el-input-number__increase.is-disabled {
            @include font_color('text-disabled');
            @include background_color('bg-disabled');
        }
    }
    .el-input-number.is-disabled {
        .el-input-number__decrease {
            @include border_color_only(
                $direction: right,
                $color: 'border-base'
            );
            @include background_color('bg-disabled');
            @include font_color('text-disabled');
            &:hover {
                @include font_color('text-disabled');
            }
            &:hover:not(.is-disabled)
            ~ .el-input
            .el-input__inner:not(.is-disabled) {
                @include border_color($color: 'border-base');
                @include font_color('text-disabled');
            }
        }
        .el-input-number__increase {
            @include border_color_only($direction: left, $color: 'border-base');
            @include background_color('bg-disabled');
            @include font_color('text-disabled');
            &:hover {
                @include font_color('text-disabled');
            }
            &:hover:not(.is-disabled)
            ~ .el-input
            .el-input__inner:not(.is-disabled) {
                @include border_color($color: 'border-base');
                @include font_color('text-disabled');
            }
        }
    }
    .el-input-number.is-controls-right {
        .el-input-number__decrease {
            @include border_color_only($direction: left, $color: 'border-base');

            border-right: 0;
        }
        .el-input-number__increase {
            @include border_color_only(
                $direction: bottom,
                $color: 'border-base'
            );
        }
    }
    // 下拉框
    .el-select {
        flex: 1;
        .el-input__suffix {
            @include font_color('text-regular');
        }
        .el-input.is-focus {
            .el-input__inner {
                @include border_color($color: 'primary');
            }
        }
        .el-input.is-disabled {
            .el-input__inner {
                @include font_color('text-disabled');
                @include border_color($color: 'text-disabled');
            }
        }
    }
    .el-select__tags {
        .el-input__inner {
            min-height: 40px;
        }
    }
    .el-select-dropdown {
        @include border_color($color: 'cover');
        @include background_color('cover');
        @include box_shadow($value: '0 2px 12px 0', $color: 'color-s');
        .el-select-dropdown__item {
            @include font_color('cover3');
            &:hover {
                @include background_color('primary');
            }
        }
        .el-select-dropdown__item.selected {
            @include font_color('cover3');
        }
        .el-select-dropdown__item.hover {
            @include background_color('primary');
            @include font_color('color-w');
        }
        .el-select-dropdown__item.is-disabled {
            @include font_color('text-disabled');
            &:hover {
                @include background_color('color-t');
            }
        }
    }
    .el-select-dropdown.is-multiple {
        .el-select-dropdown__item {
            @include font_color('cover3');
            &:hover {
                @include background_color('primary');
            }
        }
        .el-select-dropdown__item.hover {
            @include background_color('primary');
            @include font_color('color-w');
        }
        .el-select-dropdown__item.selected {
            @include background_color('primary');
            @include font_color('color-w');
        }
        .el-select-dropdown__item.is-disabled {
            @include font_color('text-disabled');
            &:hover {
                @include background_color('color-t');
            }
        }
    }
    .el-popper[x-placement^='bottom'] .popper__arrow {
        @include color($attr: 'border-bottom-color', $color: 'cover');
        &::after {
            @include color($attr: 'border-bottom-color', $color: 'cover');
        }
    }
    .el-popper[x-placement^='top'] .popper__arrow {
        @include color($attr: 'border-top-color', $color: 'cover');
        &::after {
            @include color($attr: 'border-top-color', $color: 'cover');
        }
    }
    // 级联选择
    .el-cascader__dropdown {
        @include background_color('cover');
        @include border_color($color: 'cover');
        @include box_shadow($value: '0 2px 12px 0', $color: 'color-s');
        .el-cascader-panel {
            .el-cascader-menu {
                @include border_color_only(
                    $direction: right,
                    $color: 'border-base'
                );
                @include font_color('cover3');
            }
            .el-cascader-menu:last-child {
                border-right: none;
            }
            .el-cascader-node:not(.is-disabled):hover,
            .el-cascader-node:not(.is-disabled):focus,
            .el-cascader-node.in-active-path {
                @include background_color('primary-light2');
                @include font_color('cover3');
            }
            .el-cascader-node.is-active {
                @include font_color('cover3');
            }
        }
    }
    .el-cascader:not(.is-disabled):hover {
        .el-input__inner {
            @include border_color($color: 'primary');
        }
    }
    .el-cascader-panel.is-bordered {
        @include border_color($color: 'border-base');
        .el-cascader-menu {
            @include border_color_only(
                $direction: right,
                $color: 'border-base'
            );
            @include font_color('cover3');
        }
        .el-cascader-menu:last-child {
            border-right: 0;
        }
        .el-cascader-node:not(.is-disabled):focus,
        .el-cascader-node:not(.is-disabled):hover {
            @include background_color('primary-light2');
            @include font_color('primary');
        }
        .el-cascader-node.in-active-path,
        .el-cascader-node.is-active,
        .el-cascader-node.is-selectable.in-checked-path {
            @include font_color('primary');
        }
    }
    // 开关
    .el-switch {
        .el-switch__core {
            @include border_color($color: 'border-base');
            @include background_color('cover');
            &::after {
                @include background_color('primary');
            }
        }
    }
    .el-switch.is-checked {
        .el-switch__core {
            @include border_color($color: 'border-base');
            @include background_color('primary-light2');
        }
    }
    .el-switch__label {
        @include font_color('text-regular');
    }
    .el-switch__label.is-active {
        @include font_color('primary');
    }
    // 滑块
    .el-slider {
        flex: 1;
        .el-slider__runway {
            @include background_color('info');
            .el-slider__button {
                @include background_color('cover');
                @include border_color($color: 'primary', $width: 2px);
            }
        }
        .el-slider__runway.disabled {
            @include background_color('bg-disabled');
            .el-slider__button {
                @include background_color('text-disabled');
                @include border_color($color: 'bg-disabled', $width: 2px);
            }
        }
        .el-slider__bar {
            @include background_color('primary');
        }
        .el-slider__stop {
            @include background_color('cover');
        }
    }
    // 时间选择控件
    .el-picker-panel {
        @include border_color($color: 'cover');
        @include background_color('cover');
        @include box_shadow($value: '0 2px 12px 0', $color: 'color-s');
        @include font_color('cover3');
        .el-picker-panel__body {
            .el-date-picker__header {
                .el-picker-panel__icon-btn,
                .el-date-picker__header-label {
                    @include font_color('cover3');
                }
            }
            .el-date-picker__time-header,
            .el-date-range-picker__time-header {
                @include border_color_only(
                    $direction: bottom,
                    $color: 'border-base'
                );
                .el-icon-arrow-right {
                    @include font_color('cover3');
                }
            }
            .el-date-picker__header--bordered {
                @include border_color_only(
                    $direction: bottom,
                    $color: 'border-base'
                );
            }
            .el-picker-panel__content {
                .el-date-range-picker__header {
                    .el-picker-panel__icon-btn,
                    .el-date-picker__header-label {
                        @include font_color('cover3');
                    }
                }
                .el-date-table {
                    th {
                        @include font_color('cover3');
                        @include border_color_only(
                            $direction: bottom,
                            $color: 'border-base'
                        );
                    }
                    td.next-month,
                    td.prev-month {
                        @include font_color('text-disabled');
                    }
                    td.current:not(.disabled) {
                        span {
                            @include font_color('color-w');
                            @include background_color('primary');
                        }
                    }
                    td.today span {
                        @include font_color('primary');
                    }
                    td.available {
                        @include font_color('cover3');
                        &:hover {
                            @include font_color('primary');
                        }
                    }
                    td.selected {
                        div {
                            @include background_color('info');
                            span {
                                @include font_color('color-w');
                            }
                        }
                    }
                    td.end-date,
                    td.start-date {
                        div {
                            span {
                                @include font_color('color-w');
                                @include background_color('primary');
                            }
                        }
                    }
                    td.in-range {
                        div {
                            @include background_color('primary-light2');
                            &:hover {
                                @include font_color('primary');
                            }
                        }
                    }
                }
                .el-month-table,
                .el-year-table {
                    td {
                        .cell {
                            @include font_color('cover3');
                            &:hover {
                                @include font_color('primary');
                            }
                        }
                    }
                    td.current:not(.disabled) {
                        .cell {
                            @include font_color('primary');
                        }
                    }
                    td.end-date,
                    td.start-date {
                        div {
                            @include font_color('color-w');
                        }
                        .cell {
                            @include font_color('color-w');
                            @include background_color('primary');
                        }
                    }
                    td.in-range {
                        div {
                            @include background_color('primary-light2');
                            &:hover {
                                @include background_color('primary-light2');
                            }
                        }
                    }
                }
                .el-date-table.is-week-mode {
                    .el-date-table__row.current {
                        div {
                            @include background_color('primary-light2');
                        }
                    }
                    .el-date-table__row {
                        &:hover {
                            div {
                                @include background_color('primary-light2');
                            }
                        }
                    }
                }
            }
            .el-date-range-picker__content.is-left {
                @include border_color_only(
                    $direction: right,
                    $color: 'border-base'
                );
            }
        }
        .el-picker-panel__footer {
            @include background_color('color-t');
            @include border_color_only($direction: top, $color: 'border-base');
        }
        .el-picker-panel__sidebar {
            @include background_color('cover');
            @include border_color_only(
                $direction: right,
                $color: 'border-base'
            );
            .el-picker-panel__shortcut {
                @include font_color('cover3');
                &:hover {
                    @include font_color('primary');
                }
            }
        }
        .time-select-item {
            &:hover {
                @include background_color('primary');
                @include font_color('color-w');
            }
        }
        .time-select-item.selected:not(.disabled) {
            @include font_color('cover3');
            &:hover {
                @include font_color('color-w');
            }
        }
        .time-select-item.is-disabled {
            @include font_color('text-disabled');
            &:hover {
                @include background_color('color-t');
            }
        }
    }
    .el-time-spinner__wrapper.is-arrow {
        .el-time-spinner__item:hover:not(.disabled):not(.active) {
            &:hover {
                @include background_color('primary');
                @include font_color('color-w');
            }
        }
    }
    .el-time-panel,
    .el-time-range-picker {
        @include border_color($color: 'cover');
        @include background_color('cover');
        @include box_shadow($value: '0 2px 12px 0', $color: 'color-s');
        @include font_color('cover3');
        .el-time-range-picker__body {
            @include border_color($color: 'border-base');
        }
        .el-time-panel__content {
            &::after,
            &::before {
                @include border_color_only(
                    $direction: top,
                    $color: 'border-base'
                );
                @include border_color_only(
                    $direction: bottom,
                    $color: 'border-base'
                );
            }
            .el-time-spinner__item {
                @include font_color('cover3');
                &:hover {
                    @include background_color('primary');
                    @include font_color('color-w');
                }
            }
            .el-time-spinner__item.disabled {
                @include font_color('text-disabled');
                &:hover {
                    @include background_color('color-t');
                }
            }
            .el-time-spinner__item.active:not(.disabled) {
                @include font_color('primary');
                &:hover {
                    @include background_color('primary');
                    @include font_color('color-w');
                }
            }
            .el-time-spinner__arrow {
                @include font_color('cover3');
            }
        }
        .el-time-panel__footer {
            @include border_color_only($direction: top, $color: 'border-base');
            .el-time-panel__btn {
                @include font_color('text-regular');
            }
            .el-time-panel__btn.confirm {
                @include font_color('primary');
            }
        }
    }
    .el-date-editor.el-input__inner {
        @include background_color('color-t');
        @include border_color($color: 'border-base');
        @include font_color('text-regular');
        .el-range-input {
            @include font_color('text-regular');
            @include background_color('color-t');
        }
        .el-range-separator {
            @include font_color('text-regular');
        }
    }
    .el-date-editor.el-input, 
    .el-date-editor.el-input__inner {
        width: 100%
    }
    .el-date-editor {
        .el-range__icon {
            @include font_color('text-primary');
        }
    }
    // 上传
    .el-upload {
        @include border_color($color: 'border-base', $type: dashed);
        @include font_color('text-regular');

        border-radius: 4px;
        &:hover {
            @include border_color($color: 'primary', $type: dashed);
            @include font_color('text-primary');
        }
        .el-upload-dragger{
            @include background_color('color-t');
            @include border_color($color: 'primary', $type: dashed);
        }
    }
    .el-upload__tip {
        @include font_color('text-primary');
    }
    .el-upload-list {
        .el-upload-list__item {
            @include border_color($color: 'primary', $type: dashed);
            &:hover {
                @include background_color('primary-light2');
            }
            @include font_color('text-primary');
            .el-upload-list__item-name,
            .el-icon-close,
            .el-upload-list__item-name [class^='el-icon'] {
                @include font_color('text-primary');
            }
            .el-icon-upload-success {
                @include font_color('success');
            }
            .el-icon-close-tip {
                @include font_color('primary');
            }
        }
    }
    .el-upload--picture-card {
        @include background_color('color-t');
    }
    .el-upload-list--picture-card {
        .el-upload-list__item {
            @include background_color('color-t');
            @include border_color($color: 'border-base', $type: dashed);
        }
        .el-upload-list__item-actions {
            @include font_color('color-w');
        }
    }
    .el-upload-list--picture {
        .el-upload-list__item {
            @include background_color('color-t');
            @include border_color($color: 'border-base');
            &:hover {
                @include background_color('primary-light2');
            }
        }
        .el-upload-list__item-status-label {
            @include background_color('success');
            .el-icon-upload-success {
                @include font_color('color-w');
            }
        }
    }
    // 评分
    .el-rate {
        .el-rate__text {
            @include color_important($attr: 'color', $color: 'cover3');
        }
    }
    // 取色器
    .el-color-picker {
        .el-color-picker__trigger {
            @include border_color($color: 'border-base');
            .el-color-picker__color {
                @include border_color($color: 'border-light1');
            }
            .el-color-picker__icon {
                @include font_color('color-w');
            }
        }
    }
    .el-color-picker__panel {
        @include background_color('cover');
        @include border_color($color: 'cover');
        @include box_shadow($value: '0 2px 12px 0', $color: 'color-s');
        .el-color-dropdown__btns {
            .el-color-dropdown__value {
                @include font_color('text-regular');
            }
        }
    }
    // 穿梭框
    .el-transfer {
        .el-transfer-panel {
            @include border_color($color: 'border-base');
            @include background_color('cover2');
            .el-transfer-panel__header {
                @include border_color_only(
                    $direction: bottom,
                    $color: 'border-base'
                );
                @include background_color('cover');
                .el-checkbox {
                    .el-checkbox__label {
                        @include font_color('cover3');
                        span {
                            @include font_color('cover3');
                        }
                    }
                }
            }
            .el-transfer-panel__footer {
                @include border_color_only(
                    $direction: top,
                    $color: 'border-base'
                );
                @include background_color('cover');

                padding: 6px 15px;
            }
        }
    }
    // 标签
    .el-tag {
        @include border_color($color: 'border-primary');
        @include background_color('color-t');
        @include font_color('cover3');
        .el-tag__close {
            @include font_color('cover3');
            &:hover {
                @include font_color('cover');
                @include background_color('cover3');
            }
        }
    }
    .el-tag--primary {
        @include border_color($color: 'primary');
        @include background_color('primary-light2');
        @include font_color('primary');
        .el-tag__close {
            @include font_color('primary');
            &:hover {
                @include font_color('color-w');
                @include background_color('primary');
            }
        }
    }
    .el-tag--success {
        @include border_color($color: 'success');
        @include background_color('success-light2');
        @include font_color('success');
        .el-tag__close {
            @include font_color('success');
            &:hover {
                @include font_color('color-w');
                @include background_color('success');
            }
        }
    }
    .el-tag--info {
        @include border_color($color: 'info');
        @include background_color('info-light2');
        @include font_color('cover3');
        .el-tag__close {
            @include font_color('cover3');
            &:hover {
                @include font_color('color-w');
                @include background_color('info');
            }
        }
    }
    .el-tag--warning {
        @include border_color($color: 'warning');
        @include background_color('warning-light2');
        @include font_color('warning');
        .el-tag__close {
            @include font_color('warning');
            &:hover {
                @include font_color('color-w');
                @include background_color('warning');
            }
        }
    }
    .el-tag--danger {
        @include border_color($color: 'danger');
        @include background_color('danger-light2');
        @include font_color('danger');
        .el-tag__close {
            @include font_color('danger');
            &:hover {
                @include font_color('color-w');
                @include background_color('danger');
            }
        }
    }
    // 进度条
    .el-progress {
        .el-progress-bar__outer {
            @include color_important(
                $attr: 'background',
                $color: 'info-light2'
            );
            .el-progress-bar__inner {
                .el-progress-bar__innerText {
                    @include color_important($attr: 'color', $color: 'color-w');
                }
            }
        }
        .el-progress__text {
            @include color_important($attr: 'color', $color: 'text-primary');
        }
    }
    .el-progress.is-success {
        .el-progress-bar__outer {
            .el-progress-bar__inner {
                @include background_color('success');
            }
        }
        .el-progress__text {
            @include color_important($attr: 'color', $color: 'success');
        }
    }
    .el-progress.is-warning {
        .el-progress-bar__outer {
            .el-progress-bar__inner {
                @include background_color('warning');
            }
        }
        .el-progress__text {
            @include color_important($attr: 'color', $color: 'warning');
        }
    }
    .el-progress.is-exception {
        .el-progress-bar__outer {
            .el-progress-bar__inner {
                @include background_color('danger');
            }
        }
        .el-progress__text {
            @include color_important($attr: 'color', $color: 'danger');
        }
    }
    .el-progress--line {
        flex: 1;
    }
    // 标记
    .el-badge {
        .el-badge__content {
            @include font_color('color-w');
            @include background_color('primary');
            @include border_color($color: 'color-w');
        }
        .el-badge__content--primary {
            @include background_color('primary');
        }
        .el-badge__content--danger {
            @include background_color('danger');
        }
        .el-badge__content--warning {
            @include background_color('warning');
        }
        .el-badge__content--success {
            @include background_color('success');
        }
    }
    // 结果
    .el-result {
        .icon-primary {
            @include color($attr: 'fill', $color: 'primary');
        }
        .icon-success {
            @include color($attr: 'fill', $color: 'success');
        }
        .icon-warning {
            @include color($attr: 'fill', $color: 'warning');
        }
        .icon-error {
            @include color($attr: 'fill', $color: 'danger');
        }
        .icon-info {
            @include color($attr: 'fill', $color: 'info');
        }
        .el-result__title {
            p {
                @include font_color('text-regular');
            }
        }
        .el-result__subtitle {
            p {
                @include font_color('text-secondary');
            }
        }
    }
    // alert弹出
    .el-alert {
        .el-alert__title {
            padding-right: $margin-sm;
        }
    }
    .el-alert--success.is-light {
        @include font_color('success');
        @include background_color('success-light2');
        .el-alert__closebtn {
            @include font_color('success');
        }
    }
    .el-alert--success.is-dark {
        @include font_color('color-w');
        @include background_color('success');
        .el-alert__closebtn {
            @include font_color('color-w');
        }
    }
    .el-alert--warning.is-light {
        @include font_color('warning');
        @include background_color('warning-light2');
        .el-alert__closebtn {
            @include font_color('warning');
        }
    }
    .el-alert--warning.is-dark {
        @include font_color('color-w');
        @include background_color('warning');
        .el-alert__closebtn {
            @include font_color('color-w');
        }
    }
    .el-alert--info.is-light {
        @include font_color('cover3');
        @include background_color('info-light2');
        .el-alert__closebtn {
            @include font_color('cover3');
        }
    }
    .el-alert--info.is-dark {
        @include font_color('color-w');
        @include background_color('info');
        .el-alert__closebtn {
            @include font_color('color-w');
        }
    }
    .el-alert--danger.is-light {
        @include font_color('danger');
        @include background_color('danger-light2');
        .el-alert__closebtn {
            @include font_color('danger');
        }
    }
    .el-alert--danger.is-dark {
        @include font_color('color-w');
        @include background_color('danger');
        .el-alert__closebtn {
            @include font_color('color-w');
        }
    }
    // 消息
    .el-message {
        @include border_color($color: 'border-base');
        @include background_color('info');
        @include font_color('cover3');
        .el-icon-info,
        .el-message__content {
            @include font_color('cover3');
        }
    }
    .el-message--success {
        @include border_color($color: 'success');
        @include background_color('success-light2');
        @include font_color('success');
        .el-icon-info,
        .el-message__content {
            @include font_color('success');
        }
    }
    .el-message--warning {
        @include border_color($color: 'warning');
        @include background_color('warning-light2');
        @include font_color('warning');
        .el-icon-info,
        .el-message__content {
            @include font_color('warning');
        }
    }
    .el-message--info {
        @include border_color($color: 'info');
        @include background_color('info-light2');
        @include font_color('cover3');
        .el-icon-info,
        .el-message__content {
            @include font_color('cover3');
        }
    }
    .el-message--error {
        @include border_color($color: 'danger');
        @include background_color('danger-light2');
        @include font_color('danger');
        .el-icon-info,
        .el-message__content {
            @include font_color('danger');
        }
    }
    // 消息框
    .el-message-box {
        @include border_color($color: 'border-base');
        @include background_color('cover');

        padding-bottom: 0;
        .el-message-box__header {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: space-between,
                $align: center
            );
            .el-message-box__title {
                @include font_color('cover3');

                font-size: $font-lg;
            }
            .el-message-box__headerbtn {
                position: relative;
                top: 0;
                right: 0;
                .el-message-box__close {
                    @include font_color('cover3');
                }
                &hover {
                    @include font_color('primary');
                }
            }
        }
        .el-message-box__btns {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-end,
                $align: center
            );

            padding: 10px 15px;
        }
    }
    .el-message-box--center {
        .el-message-box__header {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: center,
                $align: center
            );

            position: relative;
            .el-message-box__headerbtn {
                @include box_absolute($top: 15px, $right: 15px);
            }
        }
    }
    // 通知
    .el-notification {
        @include background_color('cover');
        @include border_color($color: 'cover');
        @include box_shadow($value: '0 2px 12px 0', $color: 'color-s');
        .el-notification__title,
        .el-notification__content,
        .el-notification__closeBtn {
            @include font_color('cover3');
        }
        .el-notification__closeBtn {
            &:hover {
                @include font_color('primary');
            }
        }
    }
    .el-notification {
        .el-icon-success {
            @include font_color('success');
        }
    }
    .el-notification {
        .el-icon-warning {
            @include font_color('warning');
        }
    }
    .el-notification {
        .el-icon-info {
            @include font_color('info');
        }
    }
    .el-notification {
        .el-icon-error {
            @include font_color('error');
        }
    }
    // 下拉菜单
    .el-dropdown-menu {
        @include background_color('cover');
        @include border_color($color: 'cover');
        @include box_shadow($value: '0 2px 12px 0', $color: 'color-s');
        .el-dropdown-menu__item {
            @include font_color('cover3');
            &:hover {
                @include background_color('primary');
                @include font_color('color-w');
            }
        }
        .el-dropdown-menu__item--divided {
            @include border_color_only($direction: top, $color: 'border-base');
        }
        .el-dropdown-menu__item--divided::before {
            @include background_color('cover');
        }
        .el-dropdown-menu__item.is-disabled {
            @include font_color('text-disabled');
        }
    }
    .el-dropdown {
        @include font_color('cover3');

        cursor: pointer;
        .el-dropdown__caret-button::before {
            display: none;
        }
    }
    // tabs标签页
    .el-tabs {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: column,
            $justify: flex-start,
            $align: flex-start
        );
        .el-tabs__header {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: center
            );
            .el-tabs__nav {
                .el-tabs__item {
                    @include font_color('cover3');
                }
                .el-tabs__item.is-active {
                    @include font_color('primary');
                }
            }
            .el-tabs__nav-wrap{
                width: 100%;
            }
            .el-tabs__nav-wrap::after {
                @include background_color('primary-light2');
            }
            
        }
        .el-tabs__content{
            width: 100%;
            flex: 1;
            overflow: hidden;
            .el-tab-pane{
                width: 100%;
                height: 100%;
                overflow: hidden
            }
        }
        .el-tabs__active-bar {
            @include background_color('primary');
        }
    }
    .el-tabs--card {
        > .el-tabs__header {
            @include border_color_only($direction: bottom, $color: 'color-t');
            .el-tabs__nav {
                @include border_color($color: 'border-base');

                border-bottom: none !important;
                .el-tabs__item {
                    @include font_color('cover3');
                    @include border_color_only(
                        $direction: left,
                        $color: 'border-base'
                    );
                    @include border_color_only(
                        $direction: bottom,
                        $color: 'border-base'
                    );
                }
                .el-tabs__item:first-child {
                    border-left: none;
                }
                .el-tabs__item.is-active {
                    @include font_color('primary');
                    @include border_color_only(
                        $direction: bottom,
                        $color: 'color-t'
                    );
                }
            }
            .el-tabs__nav-wrap::after {
                @include background_color('primary-light2');
            }
        }
    }
    .el-tabs--border-card {
        @include background_color('cover');
        @include border_color($color: 'border-base');
        > .el-tabs__header {
            @include background_color('primary-light2');
            @include border_color_only(
                $direction: bottom,
                $color: 'border-base'
            );
            .el-tabs__nav {
                @include border_color($color: 'border-base');

                border-bottom: none;
                .el-tabs__item.is-active {
                    @include border_color_only(
                        $direction: right,
                        $color: 'border-base'
                    );
                    @include border_color_only(
                        $direction: left,
                        $color: 'border-base'
                    );
                    @include background_color('primary');
                    @include font_color('color-w');
                }
            }
        }
    }
    //步骤条
    .el-steps--vertical {
        @include box_flex(
            $width: auto,
            $height: 100%,
            $direction: column,
            $justify: flex-start,
            $align: flex-start
        );
    }
    .el-steps--horizontal {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: center
        );
    }
    .el-steps--simple {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: center
        );
        @include background_color('cover1');
    }
    .el-steps--horizontal,
    .el-steps--vertical,
    .el-steps--simple {
        .el-step__head.is-process {
            @include font_color('color-w');
            @include color($attr: 'border-color', $color: 'primary');
            .el-step__line {
                @include background_color('info-light1');
            }
            .el-step__icon {
                @include background_color('primary');
            }
            .el-step__icon.is-icon {
                @include background_color('cover1');
                @include font_color('primary-light1');
            }
        }
        .el-step__head.is-wait {
            @include font_color('text-secondary');
            @include color($attr: 'border-color', $color: 'text-secondary');
            .el-step__line {
                @include background_color('info-light1');
            }
            .el-step__icon {
                @include background_color('primary-light2');
            }
            .el-step__icon.is-icon {
                @include background_color('cover1');
            }
        }
        .el-step__head.is-success {
            @include font_color('success');
            @include color($attr: 'border-color', $color: 'success');
            .el-step__line {
                @include background_color('success');
            }
            .el-step__icon {
                @include background_color('success-light2');
            }
            .el-step__icon.is-icon {
                @include background_color('cover1');
            }
        }
        .el-step__head.is-primary {
            @include font_color('primary');
            @include color($attr: 'border-color', $color: 'primary');
            .el-step__line {
                @include background_color('primary');
            }
            .el-step__icon {
                @include background_color('primary-light2');
            }
            .el-step__icon.is-icon {
                @include background_color('cover1');
            }
        }
        .el-step__head.is-warning {
            @include font_color('warning');
            @include color($attr: 'border-color', $color: 'warning');
            .el-step__line {
                @include background_color('warning');
            }
            .el-step__icon {
                @include background_color('warning-light2');
            }
            .el-step__icon.is-icon {
                @include background_color('cover1');
            }
        }
        .el-step__head.is-error {
            @include font_color('danger');
            @include color($attr: 'border-color', $color: 'danger');
            .el-step__line {
                @include background_color('danger');
            }
            .el-step__icon {
                @include background_color('danger-light2');
            }
            .el-step__icon.is-icon {
                @include background_color('cover1');
            }
        }
        .el-step__head.is-error {
            @include font_color('danger');
            @include color($attr: 'border-color', $color: 'danger');
            .el-step__line {
                @include background_color('danger');
            }
            .el-step__icon {
                @include background_color('danger-light2');
            }
            .el-step__icon.is-icon {
                @include background_color('cover1');
            }
        }
        .el-step__head.is-finish {
            @include font_color('primary');
            @include color($attr: 'border-color', $color: 'primary');
            .el-step__line {
                @include background_color('primary');
            }
            .el-step__icon {
                @include background_color('primary-light2');
            }
            .el-step__icon.is-icon {
                @include background_color('cover1');
            }
        }
        .el-step__main {
            .el-step__title.is-process,
            .el-step__description.is-process {
                @include font_color('text-regular');
            }
            .el-step__title.is-wait,
            .el-step__description.is-wait {
                @include font_color('text-secondary');
            }
            .el-step__title.is-finish,
            .el-step__description.is-finish {
                @include font_color('primary');
            }
            .el-step__title.is-success,
            .el-step__description.is-success {
                @include font_color('success');
            }
            .el-step__title.is-primary,
            .el-step__description.is-primary {
                @include font_color('primary');
            }
            .el-step__title.is-warning,
            .el-step__description.is-warning {
                @include font_color('warning');
            }
            .el-step__title.is-error,
            .el-step__description.is-error {
                @include font_color('error');
            }
        }
    }
    // 文字提示
    .el-tooltip__popper.is-light {
        @include background_color('primary-light2');
        @include font_color('primary');
        @include border_color($color: 'primary');
    }
    .el-tooltip__popper.is-light[x-placement^='bottom'] .popper__arrow {
        // border-bottom-color: red;
        @include color($attr: 'border-bottom-color', $color: 'primary');
    }
    .el-tooltip__popper.is-light[x-placement^='bottom'] .popper__arrow::after {
        @include color($attr: 'border-bottom-color', $color: 'primary-light2');
    }
    .el-tooltip__popper.is-light[x-placement^='top'] .popper__arrow {
        // border-bottom-color: red;
        @include color($attr: 'border-top-color', $color: 'primary');
    }
    .el-tooltip__popper.is-light[x-placement^='top'] .popper__arrow::after {
        @include color($attr: 'border-top-color', $color: 'primary-light2');
    }
    .el-tooltip__popper.is-light[x-placement^='left'] .popper__arrow {
        // border-bottom-color: red;
        @include color($attr: 'border-left-color', $color: 'primary');
    }
    .el-tooltip__popper.is-light[x-placement^='left'] .popper__arrow::after {
        @include color($attr: 'border-left-color', $color: 'primary-light2');
    }
    .el-tooltip__popper.is-light[x-placement^='right'] .popper__arrow {
        // border-bottom-color: red;
        @include color($attr: 'border-right-color', $color: 'primary');
    }
    .el-tooltip__popper.is-light[x-placement^='right'] .popper__arrow::after {
        @include color($attr: 'border-right-color', $color: 'primary-light2');
    }
    .el-tooltip__popper.is-dark {
        @include background_color('primary');
        @include font_color('color-w');
        @include border_color($color: 'primary');
    }
    .el-tooltip__popper.is-dark[x-placement^='bottom'] .popper__arrow {
        @include color($attr: 'border-bottom-color', $color: 'primary');
    }
    .el-tooltip__popper.is-dark[x-placement^='bottom'] .popper__arrow::after {
        @include color($attr: 'border-bottom-color', $color: 'primary');
    }
    .el-tooltip__popper.is-dark[x-placement^='top'] .popper__arrow {
        @include color($attr: 'border-top-color', $color: 'primary');
    }
    .el-tooltip__popper.is-dark[x-placement^='top'] .popper__arrow::after {
        @include color($attr: 'border-top-color', $color: 'primary');
    }
    .el-tooltip__popper.is-dark[x-placement^='left'] .popper__arrow {
        @include color($attr: 'border-left-color', $color: 'primary');
    }
    .el-tooltip__popper.is-dark[x-placement^='left'] .popper__arrow::after {
        @include color($attr: 'border-left-color', $color: 'primary');
    }
    .el-tooltip__popper.is-dark[x-placement^='right'] .popper__arrow {
        @include color($attr: 'border-right-color', $color: 'primary');
    }
    .el-tooltip__popper.is-dark[x-placement^='right'] .popper__arrow::after {
        @include color($attr: 'border-right-color', $color: 'primary');
    }
    // 弹出框
    .el-popover {
        @include background_color('cover');
        @include font_color('text-primary');
        @include border_color($color: 'cover');
        .el-popover__title {
            @include font_color('text-regular');
        }
    }
    // 卡片
    .el-card {
        @include border_color($color: 'cover');
        @include background_color('cover');
        @include font_color('text-primary');
        .el-card__header {
            @include border_color_only(
                $direction: bottom,
                $color: 'border-base'
            );
        }
    }
    // 走马灯
    .el-carousel {
        @include box_flex($width: 100%, $height: 100%, $direction: column);
        .el-carousel__container {
            @include box_flex($width: 100%, $height: 100%);
        }
        .el-carousel__indicator {
            .el-carousel__button {
                @include background_color('primary-light2');
            }
        }
        .el-carousel__indicator.is-active {
            .el-carousel__button {
                @include background_color('primary');
            }
        }
        .el-carousel__arrow {
            @include background_color('primary-light2');
            @include font_color('primary');
            &:hover {
                @include background_color('primary');
                @include font_color('color-w');
            }
        }
    }
    // 折叠面板
    .el-collapse {
        width: 100%;
        @include border_color_only($direction: bottom, $color: 'border-base');
        @include border_color_only($direction: top, $color: 'border-base');
        .el-collapse-item__header {
            @include border_color_only(
                $direction: bottom,
                $color: 'border-light1'
            );
            @include background_color('cover');
            @include font_color('text-regular');
        }
        .el-collapse-item__wrap {
            @include border_color_only(
                $direction: bottom,
                $color: 'border-light1'
            );
            @include background_color('cover');
        }
        .el-collapse-item__content {
            @include font_color('text-primary');
        }
    }
    // 时间线
    .el-timeline {
        .el-timeline-item {
            .el-timeline-item__tail {
                @include border_color_only(
                    $direction: left,
                    $width: 2px,
                    $color: 'border-base'
                );
            }
            .el-timeline-item__node {
                @include background_color('primary-light2');
            }
            .el-timeline-item__wrapper {
                .el-timeline-item__content {
                    @include font_color('text-regular');
                }
                .el-timeline-item__timestamp {
                    @include font_color('text-primary');
                }
            }
        }
    }
    // 分割线
    .el-divider {
        @include background_color('border-base');
        .el-divider__text {
            @include background_color('cover2');
            @include font_color('text-regular');
        }
    }
    // 日历
    .el-calendar {
        @include background_color('cover');
        .el-calendar__header {
            @include border_color_only(
                $direction: bottom,
                $width: 1px,
                $color: 'border-base'
            );
            .el-calendar__title {
                @include font_color('text-regular');
            }
        }
        .el-calendar__body {
            .el-calendar-table {
                thead th {
                    @include font_color('text-regular');
                }
                tr:first-child {
                    td {
                        @include border_color_only(
                            $direction: top,
                            $width: 1px,
                            $color: 'border-base'
                        );
                    }
                }
                tr {
                    td:first-child {
                        @include border_color_only(
                            $direction: left,
                            $width: 1px,
                            $color: 'border-base'
                        );
                    }
                }
                td {
                    @include border_color_only(
                        $direction: bottom,
                        $width: 1px,
                        $color: 'border-base'
                    );
                    @include border_color_only(
                        $direction: right,
                        $width: 1px,
                        $color: 'border-base'
                    );
                }
                td.is-selected {
                    @include background_color('primary-light2');
                    @include font_color('color-w');
                }
                .el-calendar-day:hover {
                    @include background_color('primary-light2');
                    @include font_color('color-w');
                }
            }
            .el-calendar-table:not(.is-range) {
                td.next,
                td.prev {
                    @include font_color('text-disabled');
                }
            }
        }
    }
    // form表单
    .el-form {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: center,
            $flex-wrap: wrap
        );
        .el-form-item {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: center
            );

            position: relative;
            .el-form-item__label {
                @include box_flex(
                    $width: auto,
                    $height: auto,
                    $direction: row,
                    $justify: flex-start,
                    $align: center
                );

                float: none;
                @include font_color('text-secondary');
                
            }
            .el-form-item__content {
                display: flex;
                align-items: center;
                margin-left: 0 !important;
                flex: 1;
                line-height: normal;
            }
        }
        .el-form-item__label-wrap {
            margin-left: 0 !important;
        }
        .el-form-item--default,
        .el-form-item--medium {
            .el-form-item__label {
                font-size: $font-md;
            }
        }
        .el-form-item--mini,
        .el-form-item--small {
            .el-form-item__label {
                font-size: $font-sm;
            }
        }
    }
    .el-form--label-left {
        .el-form-item {
            .el-form-item__label {
                @include box_flex(
                    $width: auto,
                    $height: auto,
                    $direction: row,
                    $justify: flex-start,
                    $align: center
                );
            }
        }
    }
    .el-form--label-right {
        .el-form-item {
            .el-form-item__label {
                @include box_flex(
                    $width: auto,
                    $height: auto,
                    $direction: row,
                    $justify: flex-end,
                    $align: center
                );
            }
        }
    }
    .el-form--label-center {
        .el-form-item {
            .el-form-item__label {
                @include box_flex(
                    $width: auto,
                    $height: auto,
                    $direction: row,
                    $justify: center,
                    $align: center
                );
            }
        }
    }
    .el-form-item.is-error {
        .el-input__inner,
        .el-input__inner:focus,
        .el-textarea__inner,
        .el-textarea__inner:focus,
        .el-message-box__input input.invalid,
        .el-message-box__input input.invalid:focus {
            @include color($attr: 'border-color', $color: 'danger');
        }
    }
    // table表格
    .el-table {
        width: 100%;
        @include font_color('text-regular');
        @include background_color('cover2');
        overflow: auto;
        &::after{
            position: relative;
        }
        thead {
            @include font_color('text-primary');
        }
        thead.is-group {
            th.el-table__cell {
                @include background_color('cover2');
            }
        }
        tr {
            @include background_color('cover2');
           
        }
        tr.current-row {
            >td.el-table__cell {
                @include background_color('info-light1');
            }
        }
        th.el-table__cell {
            @include background_color('cover2');
        }
        th.el-table__cell.is-leaf,
        td.el-table__cell {
            @include border_color_only(
                $direction: bottom,
                $width: 1px,
                $color: 'border-light1'
            );
        }
        .el-table__body-wrapper {
            .el-table--border.is-scrolling-left ~ .el-table__fixed {
                @include border_color_only(
                    $direction: right,
                    $width: 1px,
                    $color: 'border-light1'
                );
            }
        }
        .el-table__body {
            tr.hover-row.current-row > td.el-table__cell,
            tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
            tr.hover-row.el-table__row--striped > td.el-table__cell,
            tr.hover-row > td.el-table__cell {
                @include background_color('info-light1');
            }
        }
        .el-table__fixed-right::before,
        .el-table__fixed::before {
            @include background_color('border-light1');
        }
    }
    .el-table .hidden-row {
        display: none;
    }
    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        @include background_color('border-light1');
    }
    .el-table--striped {
        .el-table__body {
            tr.el-table__row--striped {
                td.el-table__cell {
                    @include background_color('primary-light2');
                }
            }
        }
    }
    .el-table--enable-row-hover {
        .el-table__body {
            tr:hover {
                > td.el-table__cell {
                    @include background_color('primary-light2');
                }
            }
        }
    }
    .el-table--border {
        @include border_color($color: 'border-light1');
        .el-table__cell {
            @include border_color_only(
                $direction: right,
                $width: 1px,
                $color: 'border-light1'
            );
        }
        th.el-table__cell.gutter:last-of-type,
        th.el-table__cell,
        .el-table__fixed-right-patch {
            @include border_color_only(
                $direction: bottom,
                $width: 1px,
                $color: 'border-light1'
            );
        }
    }
    .el-table__fixed-right-patch {
        @include background_color('cover2');
    }
    .el-table--border {
        th.el-table__cell,
        .el-table__fixed-right-patch {
            @include border_color_only(
                $direction: bottom,
                $width: 1px,
                $color: 'border-light1'
            );
        }
    }
    .el-table__header-wrapper,.el-table__body-wrapper,.el-table__footer-wrapper{
        // overflow:visible;
    }
    .el-table__body-wrapper{
        // overflow-x:visible !important;
    }
    // 图片
    .el-image {
        width: 100%;
        height: 100%;
        .el-image__error {
            width: 100%;
            height: 100%;
        }
    }
    // 滑动容器
    .tags-view-container {
        .el-scrollbar__bar {
            bottom: 0;
        }
        .el-scrollbar__wrap {
            @include box_flex($width:100%,$height:100%,$direction:row,$justify:flex-start,$align:center);

            margin-bottom: 0!important;
            .el-scrollbar__view {
                @include box_flex($width:100%,$height:100%,$direction:row,$justify:flex-start,$align:center);
            }
        }
    }
    
    // 树形控件
    .el-tree {
        @include background_color('color-t');
        @include font_color('text-primary');
        @include box_flex($width:100%,$height:100%,$direction:column,$justify:flex-start,$align:flex-start);
        .el-tree-node {
            @include box_flex($width:100%,$height:auto,$direction:column,$justify:flex-start,$align:flex-start);
            .el-tree-node__content {
                padding: 5px 0;
                @include box_flex($width:100%,$height:auto,$direction:row,$justify:flex-start,$align:center);
                .el-tree-node__children {
                    @include box_flex($width:100%,$height:auto,$direction:column,$justify:flex-start,$align:flex-start);
                    .el-tree-node__content {
                        @include box_flex($width:100%,$height:auto,$direction:row,$justify:flex-start,$align:flex-start);
                    }
                }
            }
            >.el-tree-node__children {
                @include box_flex($width:100%,$height:auto,$direction:column,$justify:flex-start,$align:flex-start);
            }
            &:focus {
                >.el-tree-node__content {
                    @include background_color('color-t');
                    @include font_color('text-primary');
                }
            }
            &:hover {
                >.el-tree-node__content {
                    @include background_color('color-t');
                }
            }
        }
    }
    .el-tree.el-tree--highlight-current {
        .el-tree-node {
            &:focus {
                >.el-tree-node__content {
                    @include background_color('cover1');
                    @include font_color('primary');
                }
            }
            &:hover {
                >.el-tree-node__content {
                    @include background_color('color-t');
                }
            }
        }
        .el-tree-node.is-current {
            >.el-tree-node__content {
                @include background_color('cover1');
                @include font_color('primary');
            }
        }
    }
    .el-tree[size='default'],
    .el-tree[size='medium'] {
        .el-tree-node__label {
            font-size: $font-md;
        }
    }
    .el-tree[size='mini'] {
        .el-tree-node__label {
            font-size: $font-mini;
        }
    }
    .el-tree[size='small'] {
        .el-tree-node__label {
            font-size: $font-sm;
        }
    }
    
    // 分页
    .el-pagination {
        @include font_color('text-primary');
        .el-pagination__total {
            @include font_color('text-primary');
        }
        .el-pagination__sizes {
            @include font_color('text-primary');
        }
        .btn-next,
        .btn-prev {
            @include background_color('color-t');
            @include font_color('text-primary');
        }
        button:disabled {
            @include font_color('text-disabled');
        }
        .el-pager {
            li {
                @include background_color('color-t');
            }
            li.btn-quicknext,
            li.btn-quickprev {
                @include font_color('text-primary');
            }
        }
        .el-pagination__jump {
            @include font_color('text-primary');
        }
        
    }
    .el-pagination.is-background {
        .el-pager {
            li:not(.disabled).active {
                @include background_color('primary');
            }   
            li:not(.disabled):hover {
                @include font_color('primary');
            }
            li.active:hover{
                @include font_color('color-w');
            }
        } 
        .btn-next,.btn-prev,.el-pager li {
            @include font_color('text-primary');
        }
        .btn-next:disabled,.btn-prev:disabled {
            @include font_color('text-disabled');
        }
    } 

    // 弹框
    .el-dialog {
        @include box_flex($width: auto,$height:auto,$direction: column,$justify: flex-start,$align: center);
        .el-dialog__header {
            @include box_flex($width: 100%,$height:auto,$direction: row,$justify: flex-start,$align: center);

            padding: $margin-md $margin-md;
            @include background_color('cover');
            .el-dialog__title {
                line-height: 100%;
                font-size: $font-lg;
                @include font_color('text-primary');
            }
        }
        .el-dialog__headerbtn {
            top: $margin-md;
            right: $margin-md;
            .el-dialog__close {
                @include font_color('text-primary');
            }
            .el-dialog__close:hover {
                @include font_color('primary');
            }
        }
        .el-dialog__body {
            @include box_flex($width: 100%,$height:auto,$direction: row,$justify: center,$align: center);

            padding:0 $margin-md;
            @include background_color('cover');
            img {
                width: 100%;
                height: auto;
            }
        } 
        .el-dialog__footer {
            @include background_color('cover');
            @include box_flex($width: 100%,$height:auto,$direction: row,$justify: flex-end,$align: center);

            padding: $margin-md;
        }
    }
    // 加载
    .el-loading-mask {
        @include background_color('color-t');
        .el-loading-spinner {
            .path {
                @include color($attr:'stroke',$color: 'primary');
            }
        }
    }
    .el-scrollbar{
        .el-scrollbar__thumb{
            @include color($attr:'background-color',$color:'info-light1');
            &:hover{
                @include color($attr:'background-color',$color:'primary-light2');
            }
        }
    }
}
